<template>
  <div>
    <el-dialog
      title="添加门店"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form
        :model="addShopForm"
        :rules="rules"
        ref="addShopFormRef"
        label-width="100px"
      >
        <el-row :gutter="20">
          <el-col :span="20">
            <div class="grid-content bg-purple">
              <el-form-item label="设备ID" prop="id">
                <el-input v-model="addShopForm.id"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="20">
            <div class="grid-content bg-purple">
              <el-form-item label="门店名称" prop="name">
                <el-input v-model="addShopForm.name"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="20">
            <div class="grid-content bg-purple">
              <el-form-item label="地址" prop="address">
                <el-input v-model="addShopForm.address"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="20">
            <div class="grid-content bg-purple">
              <el-form-item label="联系人" prop="contactInfo">
                <el-input v-model="addShopForm.contactInfo"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="20">
            <div class="grid-content bg-purple">
              <el-form-item label="联系人电话" prop="contactMobile">
                <el-input v-model="addShopForm.contactMobile"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-for="item in addShopForm.channel" :key="item.channelId">
            <el-col :span="12">
              <el-form-item label="通道" prop="beerType">
                <el-select v-model="item.beerType" :placeholder="'请选择通道'+item.channelId+'啤酒'">
                  <el-option label="黄啤" value="shanghai"></el-option>
                  <el-option label="黑啤" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="校正系数" prop="coe" label-width="80px">
                <el-input v-model="item.coe"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
        <el-form-item>
          <el-button type="success" @click="test">创建</el-button
          >
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'AddShop',
  data () {
    return {
      dialogVisible: false,
      addShopForm: {
        id: '',
        name: '',
        address: '',
        contactInfo: '',
        contactMobile: '',
        channel: [
          { channelId: 1, beerType: '', coe: 1.0 },
          { channelId: 2, beerType: '', coe: 1.0 },
          { channelId: 3, beerType: '', coe: 1.0 },
          { channelId: 4, beerType: '', coe: 1.0 },
          { channelId: 5, beerType: '', coe: 1.0 },
          { channelId: 6, beerType: '', coe: 1.0 }
        ]
      },
      rules: {
        id: [
          { required: true, message: '此为主机唯一ID', trigger: 'change' }],
        contactInfo: [
          { required: true, message: '联系人不能为空', trigger: 'change' }],
        name: [{ required: true, message: '店铺名称不能为空', trigger: 'change' }],
        address: [{ required: true, message: '地址不能为空', trigger: 'change' }],
        contactMobile: [{ required: true, message: '手机不能为空', trigger: 'change' }]
      }
    }
  },
  methods: {
    // // 创建新门店
    // submitForm (submitForm) {
    //   this.$refs.addUserFormRef.validate(valid => {
    //     if (!valid) {
    //       return
    //     }
    //     addUser(this.addUserForm)
    //       .then(res => this.addUserSuccess(res))
    //       .catch(err => this.addUserFailed(err))
    //   })
    // },
    // 创建新用户成功回调方法
    // addUserSuccess (res) {
    //   console.log(res.data)
    //   if (res.data.code === 1) {
    //     return this.$message.error('用户名已经存在，请重试！')
    //   } else if (res.data.code === 0) {
    //     this.dialogVisible = false
    //     this.$message.success('用户添加成功！')
    //     this.$emit('getUserList')
    //   } else {
    //     this.$message.error('用户创建失败！请联系管理员！')
    //   }
    // },
    // 创建新用户失败
    // addUserFailed (err) {
    //   console.log(err)
    // },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    resetForm () {
      this.$refs.addShopFormRef.resetFields()
    },
    test () {
      console.log(this.addShopForm)
    }
  }
}
</script>
